<template>
    <div>
        <!--  修改密码对话框  -->
        <el-dialog v-dialogDrag
                   custom-class="dialogClass"
                   title="修改密码"
                   :visible.sync="modifyPwdDialogVisible"
                   :before-close='saveCancel'
                   width="18%"
                   top="25vh">

            <el-form :model="modifyPwdForm" :rules="rules" ref="modifyPwdFormRef" label-width="100px"
                     label-position="left">
                <el-form-item label="原密码" prop="oldPwd">
                    <el-input :type="[flag1?'text':'password']" v-model="modifyPwdForm.oldPwd" maxlength="64" placeholder='请输入原密码'>
                        <i slot="suffix" :class="[flag1?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag1=!flag1" />
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                    <el-input :type="[flag2?'text':'password']" v-model="modifyPwdForm.newPwd" maxlength="64" placeholder='请输入新密码'>
                        <i slot="suffix" :class="[flag2?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag2=!flag2" />
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPwd">
                    <el-input :type="[flag3?'text':'password']" v-model="modifyPwdForm.confirmPwd" maxlength="64" placeholder='请输入确认密码'>
                        <i slot="suffix" :class="[flag3?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag3=!flag3" />
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="reset">重置</el-button>
              <el-button type="primary" @click="saveCancel">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '../common/bus';
import { Message } from 'element-ui';

export default {
    name: 'ModifyPwd',
    props: ['modifyPwdDialogVisible'],
    data () {
        let validConfirmPwd = (rule, value, callback) => {
            if (!value || value === '') {
                callback(new Error('请输入确认密码'))
            } else if (value !== this.modifyPwdForm.newPwd) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }

        return {
            flag1: false,
            flag2: false,
            flag3: false,

            modifyPwdForm: {
                oldPwd: '',
                newPwd: '',
                confirmPwd: '',
            },
            rules: {
                oldPwd: [
                    {required: true, message: '请输入原密码', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'}
                ],
                newPwd: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'}
                ],
                confirmPwd: [
                    {required: true, validator: validConfirmPwd, trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 64 个字符', trigger: 'blur'},
                ],
            },
        }
    },
    methods: {
        // 修改密码表单重置按钮
        reset() {
            if(this.$refs["modifyPwdFormRef" ] !== undefined) {
                this.$refs["modifyPwdFormRef" ].resetFields();
            }
            Message.success("重置成功");
        },
        // 修改密码表单取消按钮
        saveCancel: function () {
            //this.modifyPwdDialogVisible = false;
            bus.$emit('showModifyPwd', false);
            if(this.$refs["modifyPwdFormRef" ] !== undefined) {
                this.$refs["modifyPwdFormRef" ].resetFields();
            }
        },
        // 修改密码表单确定按钮
        save() {
            this.$refs['modifyPwdFormRef'].validate((valid) => {
                if (valid) {
                    if (this.modifyPwdForm.oldPwd === this.modifyPwdForm.newPwd) {
                        Message.warning("新密码与旧密码相同！");
                        return false;
                    }
                    this.postRequest('/sysUser/modifyPwd', this.modifyPwdForm).then((resp => {
                        if (resp && resp.status === 200 && resp.data === 1) {
                            bus.$emit('showModifyPwd', false);
                            Message.success("修改密码成功，请重新登录！");
                            localStorage.removeItem('ms_username');
                            localStorage.removeItem('token');
                            this.$router.push('/login');
                        }
                    }));
                } else {
                    return false;
                }
            })
        },

    },
};
</script>

<style scoped>

</style>